<template>
  <div>
    <el-button @click="setDataSource">保存数据源</el-button>
    <input type="file" @change="changeFileDemo" />
    <el-button type="primary" @click="excelImport">导入excel</el-button>
    <el-button type="primary" @click="excelExport">导出excel</el-button>
    <el-button type="primary" @click="exportPDF">导出成pdf</el-button>
    <el-button type="primary" @click="handelPrint">打印</el-button>
    <el-button type="primary" @click="setImage">设置图片</el-button>
    <el-button type="primary" @click="setReadOnly">设置单元格只读</el-button>
    <el-button type="primary" @click="setGradientButtonClicked">设置单元格背景</el-button>
    <div id="ssDesigner" style="height: 700px; width: 100%; text-align: left"></div>
  </div>
</template>

<script lang="ts">
import '@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css'
import '@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css'
import '@grapecity/spread-sheets-shapes'
import '@grapecity/spread-sheets-vue'
import '@grapecity/spread-sheets-pivot-addon'
import '@grapecity/spread-sheets-tablesheet'
import GC from '@grapecity/spread-sheets'
import '@grapecity/spread-sheets-resources-zh'
GC.Spread.Common.CultureManager.culture('zh-cn')
import '@grapecity/spread-sheets-designer-resources-cn'
import '@grapecity/spread-sheets-designer'
import { IO } from '@grapecity/spread-excelio'
export default {
  name: 'Designer',
  props: {},
  setup() {
    let designer: any
    let workbook
    let spread
    let importExcelFile = ref({})
    let spreadNS
    let selectionRow = ref<number>(0)
    let selectionCol = ref<number>(0)
    onMounted(() => {
      designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById('ssDesigner'))
      workbook = designer.getWorkbook()
      // 绑定初始化据结构
      let data = {}
      let source = new GC.Spread.Sheets.Bindings.CellBindingSource(data)
      spread = workbook.getActiveSheet()
      spread.setDataSource(source)
      // 设置背景色
      workbook.options.grayAreaBackColor = 'gray'
      spreadNS = GC.Spread.Sheets
      //选中的当前单元格的行和列
      workbook.bind(spreadNS.Events.SelectionChanging, (e, args) => {
        let selection = args.newSelections.pop()
        selectionRow.value = selection.row
        selectionCol.value = selection.col
        console.log(selection.row, selection.col, e)
      })
    })
    const setReadOnly = () => {
      let sheet = workbook.getActiveSheet()
      let range = sheet.getSelections()[0]
      spread.getRange(range.row, range.col, range.rowCount, range.colCount).locked(true)
    }
    //设置单元格颜色
    const setGradientButtonClicked = () => {
      let backColor = {
        stops: [
          {
            position: 0,
            color: '#838383'
          },
          {
            position: 0.5,
            color: 'white'
          },
          {
            position: 1,
            color: '#82bc00'
          }
        ]
      }
      let selection = spread.getSelections()[0]
      if (selection) {
        spread
          .getRange(selection.row, selection.col, selection.rowCount, selection.colCount)
          .backColor(backColor)
      }
      spread.setActiveSheet(0, { isProtected: true })
    }
    const setDataSource = () => {
      console.log(spread.getDataSource().getSource())
    }
    const changeFileDemo = (e) => {
      importExcelFile.value = e.target.files[0]
    }
    //导入excel
    const excelImport = () => {
      let excelIo = new IO()
      excelIo.open(importExcelFile.value, (json) => {
        workbook.fromJSON(json)
      })
    }
    //导出excel
    const excelExport = () => {
      let excelIo = new IO()
      let json = workbook.toJSON()
      excelIo.save(json, (blob) => {
        saveAs(blob, 'ss.xlsx')
      })
    }
    // 导出成pdf
    const exportPDF = () => {
      workbook.savePDF((blob) => {
        saveAs(blob, 'download.pdf')
      })
    }
    // 打印的方法
    const handelPrint = () => {
      workbook.print()
    }
    const setImage = () => {
      console.log(12)
    }
    return {
      designer,
      spread,
      setDataSource,
      excelImport,
      changeFileDemo,
      excelExport,
      exportPDF,
      handelPrint,
      setImage,
      setReadOnly,
      setGradientButtonClicked
    }
  }
}
</script>

<style scoped></style>
